<template>
  <div class="run-mod-box">
    <div>下面这块是内嵌的动态组件:</div>
    <async-component url="http://127.0.0.1:5500/dist/async-components/userList.js"></async-component>
    <PageTable ref="pageTable" :config="pageTableConfig"/>
  </div>
</template>
<script>
import UserEdit from "./UserEdit.vue";
export default {
  // components: {},
  // props: {},
  data() {
    return {
      searchForm: {
        name: null
      },
      tableData: [],
      loading: false,
      searchParam: {
        ascs: [],
        condition: {},
        descs: [],
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      selection: null,
      pageTableConfig: {
        title: "配置项列表",
        formDirection: "column", //default
        action: "QueryUserList",
        resource: null,
        customDataProcess: null, //default
        loadDataFn: null, //default
        columnsFn: this.columns,
        autoFirst: true, //default
        searchLabelPosition: "top", //default
        searchFields: [
          {
            label: "用户名",
            field: "name",
            placeholder: "请输入用户名",
            maxlength: 30, // default
            size: "small" //default
          },
          {
            label: "性别",
            field: "sex",
            placeholder: "请输入性别",
            maxlength: 30, // default
            size: "small" //default
          }
        ],
        tableButtons: [
          {
            optType: "create",
            handler: () => {
              this.add();
            }
          }
        ],
        //default
        formButtons: [{ optType: "search" }, { optType: "reset" }]
      }
    };
  },
  // computed: {},
  // created: function() {},
  // beforeMount: function() {},
  // mounted: function() {},
  // beforeDestroy: function() {},
  // destroyed: function() {},
  methods: {
    columns() {
      return [
        {
          type: "selection",
          width: 55,
          // fixed: 'left',
          align: "center"
        },
        {
          title: this.$t("common.operating"),
          align: "center",
          // fixed: 'left',
          width: 110,
          render: (h, params) => {
            return h("RowTools", {
              props: {
                data: [
                  {
                    type: "icon",
                    icon: "md-create",
                    text: this.$t("common.edit"),
                    handle: () => {
                      this.edit(params.row.id, params.row.version);
                    }
                  },
                  {
                    type: "icon",
                    icon: "ios-trash-outline",
                    text: this.$t("common.delete"),
                    handle: () => {
                      this.delete(params.row.id);
                    }
                  }
                ]
              }
            });
          }
        },
        {
          title: "用户名",
          key: "name",
          sortable: "custom",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: params.row.name
                }
              },
              params.row.name
            );
          }
        },
        {
          title: "用户Id",
          key: "id",
          align: "center",
          // width: 120,
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: params.row.id
                }
              },
              params.row.id
            );
          }
        },
        {
          title: "性别",
          key: "sex",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: params.row.sex
                }
              },
              params.row.sex
            );
          }
        },
        {
          title: "年龄",
          key: "age",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: params.row.age
                }
              },
              params.row.age
            );
          }
        },
        {
          title: "生日",
          key: "dateOfBirth",
          width: 100,
          render: (h, params) => {
            return h(
              "div",
              {
                attrs: {
                  class: "ivu-table-cell ivu-table-cell-ellipsis",
                  title: params.row.dateOfBirth
                }
              },
              params.row.dateOfBirth
            );
          }
        },
        {
          title: this.$t("common.status"),
          align: "center",
          key: "preferredLanguage",
          width: 110,
          render: (h, params) => {
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: params.row.preferredLanguage == 0 ? "blue" : "red"
                }
              },
              params.row.preferredLanguage == 0 ? this.$t("common.valid") : this.$t("common.invalid")
            );
          }
        }
      ];
    },
    search(page) {
      this.$refs["pageTable"].search();
    },
    add() {
      this.search();
      new this.$pageModal(
        UserEdit,
        {
          props: {}
        },
        data => {
          if (data) {
            this.search();
          }
        }
      );
    },
    edit(id, version) {
      new this.$pageModal(
        UserEdit,
        {
          props: {
            id: id,
            version: version
          }
        },
        data => {
          if (data) {
            this.search();
          }
        }
      );
    },
    delete(id) {
      new $confirm(this.$t("common.warning.confirmToDelete"), this).then(() => {
        this.$store
          .dispatch("DeleteUserForDemo", { id: id })
          .then(response => {
            this.$Message.success({
              content: response.msg,
              duration: 3
            });
            this.search();
          })
          .catch(data => {
            this.$Message.warning({
              content: data.message,
              duration: 3
            });
          });
      });
    }
  }
  // watch: {},
  // directives: {}
};
</script>
